<template>
  <div class="animate__animated animate__fadeInUp relative w-full bg">
    <div class="w-1200px mx-auto card flex">
      <div class="flex flex-col">
        <img src="../assets/images/job-ai-qr@2x.png" class="w-262px h-262px img-box" alt="" />
        <div class="text-16px lh-16px mt-24px text-center text-#333">扫描二维码，了解详情</div>
      </div>
      <div class="divider"></div>
      <div class="wrap-list">
        <div class="flex flex-col items-center" v-for="(item, index) in list" :key="index">
          <div class="text-#333333 text-20px font-bold lh-20px flex items-center">
            <img :src="item.prefix" alt="" class="w-25px h-31px mr-8px" />
            <span>{{ item.title }}</span>
          </div>
          <div class="text-#666666 text-14px lh-18px font-400 mt-16px text">{{ item.text }}</div>
          <img :src="item.img" alt="" class="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import img1 from '@/assets/images/01@2x.png';
import img2 from '@/assets/images/02@2x.png';
import img3 from '@/assets/images/03@2x.png';
import i1 from '@/assets/images/01图@2x.png';
import i2 from '@/assets/images/02图@2x.png';
import i3 from '@/assets/images/03图@2x.png';
const list = [
  {
    title: '扫码授权，轻松登录',
    prefix: img1,
    text: '第一步：请扫描左侧二维码',
    img: i1,
  },
  {
    title: '测评职业，精准定位',
    prefix: img2,
    text: '第二步：点击进入测评，通过测评，更深入了解自己',
    img: i2,
  },
  {
    title: '问答解惑，助力前行',
    prefix: img3,
    text: '第三步：与AI问答，更充分的了解自己，精准选择专业',
    img: i3,
  },
];
</script>

<style lang="scss" scoped>
.bg {
  background: linear-gradient(0deg, #f6f6f6, #eaf1fe);
  @apply pt-47px pb-74px min-h-800px;
}

.card {
  @apply rounded-6px pl-50px pr-27px items-center justify-center;
  background: url(../assets/images/job-ai-bg@2x.png) no-repeat;
  background-size: 100%;
  box-shadow: 0 1px 10px 0 #d0cbcc7a;
  height: 490px;
}
.img-box {
  @apply roudned-5px overflow-hidden;
  box-shadow: 0 1px 10px 0 #d0cbcc7a;
}

.divider {
  @apply h-300px w-1.5px bg-#E5E5E5 ml-50px mr-28px;
}

.wrap-list {
  @apply flex;
  > div {
    .text {
      width: 182px;
      margin-left: 34px;
    }
    &:nth-child(1) {
      @apply mr-58px;
      > img {
        @apply w-176px h-173px mt-40px;
      }
    }
    &:nth-child(2) {
      @apply mr-57px;
      > img {
        @apply w-217px h-218px mt-22px;
      }
    }
    &:nth-child(3) {
      > img {
        @apply w-216px h-206px mt-22px;
      }
    }
  }
}
</style>
